<template>  
    <div class="danmu-container">  
        <div
            class="danmu"  
            ref="danmuRef"
        >
            <div 
                v-for="(item, index) in messages" 
                :key="index" 
                class="text"
            >
                {{ item.text }}
            </div>
        </div>
    </div>  
</template>  
    
<script lang="ts" setup>  
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onUnmounted, onBeforeUnmount, nextTick, watchEffect  } from 'vue'
    import type { Ref, Raw } from 'vue'
import { clear } from 'console';
    const props = withDefaults(defineProps<{
        messages?: any[],
        messageDuration: number
    }>(), {
        messages: () => [],
        messageDuration: 10
    })

    const danmuRef: Ref<any> = ref(null)
    const interval: Ref<any> = ref('')
    watchEffect(() => {
        if (props.messages.length > 0) {
            nextTick(() => {
                if (interval.value) {
                    clearInterval(interval.value)
                }
                interval.value = setInterval(() => {
                    if (parseInt(danmuRef.value?.style.left) || parseInt(danmuRef.value?.style.left) == 0) {
                        // console.log(1)
                        danmuRef.value.style.left = parseInt(danmuRef.value.style.left) - 10 + 'px'
                    } else {
                        // console.log(2)
                        danmuRef.value.style.left = document.getElementById('app').offsetWidth + 'px'
                    }

                    // console.log(danmuRef.value.style.left)
                    // console.log(danmuRef.value.offsetWidth)
                    if (parseInt(danmuRef.value.style.left) <= -danmuRef.value.offsetWidth) {
                        danmuRef.value.style.left = document.getElementById('app').offsetWidth + 'px'
                    }
                }, 100)
            })
        }
    })
    onUnmounted(() => {
        clearInterval(interval.value)
    })
    console.log(props.messages)
</script>  
    
<style lang="scss" scoped>  
    .danmu-container {  
        position: absolute;
        bottom: 0vw;
        left: 0;
        width: 100vw;
        height: 5vw;
        overflow: hidden;
    }  
        
    .danmu {  
        position: absolute;  
        white-space: nowrap;  
        top: 50%;  
        transform: translateY(-50%);  
        font-size: 28px;  
        box-sizing: border-box;
        padding: 5px 10px;  
        border-radius: 5px;  
        // background-color: rgba(255, 255, 255, 0.7);  
        color: #333;  
        will-change: transform;  
        display: flex;
    }  
    .text {
        background-color: rgba(255, 255, 255, 0.7);  
        box-sizing: border-box;
        border-radius: 5px;  
        padding: 5px 10px; 
        margin: 0 10px; 
    }
   
</style>